<template>
	<view class="xuetangbox">
		<view class="chartbox">
			<view class="dataline">
				<view class="danwei">
					单位：mmol/L
				</view>
				<view class="pickerbox">
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="picker">{{array[index]}}</view>
					</picker>
				</view>
			</view>
			<view class="chart">
				<!-- <l-echart ref="chart1"></l-echart> -->
			</view>
		</view>
		  <scroll-view scroll-y="true" class="scroll-area">
		<view class="putbox">
			<view class="puttile">
				数据输入
			</view>
			<view class="putlebel">
				血糖值
			</view>
			<input type="number" class="put" placeholder="例如:5.6" />
			<view class="putlebel">
				测量时间
			</view>
	           <picker @change="bindPickerChange" :value="index" :range="array">
	           	<view class="put">{{array[index]}}</view>
	           </picker>
			   <view class="putlebel">
			   	胰岛素类型
			   </view>
			      <picker @change="bindPickerChange" :value="index" :range="array">
			      	<view class="put">{{array[index]}}</view>
			      </picker>
				  <view class="putlebel">
				  	胰岛素剂量
				  </view>
				 <slider value="100" @change="sliderChange" min="50" max="200" show-value />
				  <view class="putlebel">
				  	用药名称
				  </view>
				 <picker @change="bindPickerChange" :value="index" :range="array">
				 	<view class="put">{{array[index]}}</view>
				 </picker>
				  <view class="putlebel">
				  	用药剂量(片)
				  </view>
				  <slider value="100" @change="sliderChange" min="50" max="200" show-value />
				  <view class="putlebel">
				 碳水化合物摄入量(克)
				  </view>
				<slider value="100" @change="sliderChange" min="50" max="200" show-value />
				  <view class="putlebel">
			     酒精摄入量(克)
				   </view>
				 <slider value="100" @change="sliderChange" min="50" max="200" show-value />
				   <view class="putlebel">
				  运动类型
				     </view>
					 <picker @change="bindPickerChange" :value="index" :range="array">
					 	<view class="put">{{array[index]}}</view>
					 </picker>
					 <view class="putlebel">
					运动时长(分钟)
					   </view>
					   <slider value="100" @change="sliderChange" min="50" max="200" show-value />
					   <view class="putlebel">
					   运动强度
					      </view>
					   <slider value="100" @change="sliderChange" min="50" max="200" show-value />
						  <view class="putlebel">
						  入睡时间
						     </view>
						  	 <slider value="100" @change="sliderChange" min="50" max="200" show-value />
							 
							 <view class="putlebel">
							 睡眠时长(时/分)
							    </view>
							    <slider value="100" @change="sliderChange" min="50" max="200" show-value />
								
			<view class="putlebel">
			睡眠质量
			   </view>
				 <slider value="100" @change="sliderChange" min="50" max="200" show-value />
				  <view class="putlebel">
				压力水平
				     </view>
				  	 <slider value="100" @change="sliderChange" min="50" max="200" show-value />
					  <view class="putlebel">
					  心情趋势
					       </view>
					     <slider value="100" @change="sliderChange" min="50" max="200" show-value />
                     <view class="putlebel">
                           备注
                          </view>
						  <textarea cols="30" rows="10" placeholder="其他需要记录的信息"></textarea>
			       
				  
				  <view class="contentbox">
				  	<view class="puttile">
				  		个性化建议
				  	</view>
				  					<view class="content">
				  						<view class="dian"></view>
				  						<view class="txt">
				  							根据您的碳水化合物摄入和胰岛素剂量，预计2小时后血糖下降至4.8mmol/L,建议准备少量零食以防低血糖
				  						</view>
				  					</view>
				  					<view class="content">
				  						<view class="dian"></view>
				  						<view class="txt">
				  							您今天的运动量时钟，预祝与提高胰岛素敏感性，继续保持
				  						</view>
				  					</view>
				  					<view class="content">
				  						<view class="dian"></view>
				  						<view class="txt">
				  						 睡眠质量良好，有助于血糖控制，建议保持规律作息
				  						</view>
				  					</view>
				  					<view class="content">
				  						<view class="dian"></view>
				  						<view class="txt">
				  							压力水平中等，尝试进行10-15分钟的深呼吸或冥想练习，有助于缓解压力
				  						</view>
				  					</view>
				  					<view class="content">
				  						<view class="dian"></view>
				  						<view class="txt">
				  							保持血糖在目标范围内（空腹4.4-7.0mmol/L,餐后 10.0mmol/L)
				  						</view>
				  					</view>
				  					<view class="content">
				  						<view class="dian"></view>
				  						<view class="txt">
				  							控制血压在130/80mmHg以下
				  						</view>
				  					</view>
				  					<view class="content">
				  						<view class="dian"></view>
				  						<view class="txt">
				  							每年进行眼底检查。尿微量白蛋白检查和足部检查
				  						</view>
				  					</view>
				  					<view class="content">
				  						<view class="dian"></view>
				  						<view class="txt">
				  							保持健康饮食，限制钠摄入，增加膳食纤维
				  						</view>
				  					</view>
				  					<view class="content">
				  						<view class="dian"></view>
				  						<view class="txt">
				  							每周至少进行150分钟中等强度有氧运动
				  						</view>
				  					</view>
				  					<view class="content">
				  						<view class="dian"></view>
				  						<view class="txt">
				  							戒烟限酒，保持健康体重
				  						</view>
				  					</view>
				  					
				  </view>
				
				  <view class="btnline">
				  	<view class="btn1">
				  		保存数据
				  	</view>
					<view class="btn2">
						生成方案
					</view>
				  </view>
			
		</view>
		</scroll-view>
	</view>
</template>

<script>
	 // import lEchart from '../pagesO/components/lime-echart/components/l-echart/l-echart.vue'
	export default {
		name:"xuetang",
		data() {
			return {
				
			};
		},
		//  components:{
		//  lEchart	
		//  },
		// mounted() {
			
		// 	 this.initChart1()
			
		// },
		methods:{
			initChart1() {
					let option = {
						color: ['#5087EC', '#3AB54A'],
				
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'cross',
								label: {
									backgroundColor: '#283b56'
								}
							}
						},
						legend: {
							top:10
						},
						grid: {
							bottom: 10,
							left: 0,
							right: 20,
							containLabel: true
						},
						xAxis: [{
							type: 'category',
							data: ['餐前', '餐后', '餐后1.5小时', '餐后2小时', '餐后3小时', '餐后4小时'],
							axisLine: {
								lineStyle: {
									color: '#999999'
								}
							},
							axisLabel: {
								color: '#666666'
							}
						}],
						yAxis: [{
							type: 'value',
							// 格式化标签，只显示整数
							axisLabel: {
								color: '#666666',
								formatter: function(value) {
									
									return Math.round(value);
								}
							}
						}],
						series: [{
								type: "line",
								name: "血糖预测",
								data: [0,0,0,0,0,0]
							},
							{
								type: "line",
								name: "正常范围上限",
								data: [0,0,0,0,0,0]
							}
							,
							{
								type: "line",
								name: "正常范围下限",
								data: [0,0,0,0,0,0]
							}
						]
					}
			     
					this.$nextTick(() => {
						this.$refs.chart1.init(this.$echarts, chart1 => {
							chart1.setOption(option);
						});
					})
					},
		}
		
	}
</script>

<style lang="less" scoped>
  .xuetangbox{
	  width: 100%;
	  box-sizing: border-box;
	  padding-top: 70rpx;
	  .chartbox{
		  width: 710rpx;
		 
		  background-color: white;
		  border-radius: 20rpx;
		  box-sizing: border-box;
		  padding: 20rpx;
		   box-shadow: 0 0 16rpx rgba(0, 0, 0, 0.2);
		   position: fixed;
		   top: 80rpx;
		   left: 20rpx;
		   
		   .dataline{
			 display: flex;
			   align-items: center;
			   justify-content: space-between;
			   .picker{
				   width: 130rpx;
				   height: 40rpx;
				   border: 2rpx solid #aaaaaa;
				   border-radius: 10rpx;
			   }
		   }
		   .chart{
			   width: 670rpx;
			   height: 600rpx;
		   }
	  }
	  .scroll-area {
	    position: absolute;
	    top: 780rpx;    /* <- **必须等于 .chartbox 的高度** */
	    left: 0;
	    right: 0;
	    bottom: 0;
		box-sizing: border-box;
		padding:20rpx 20rpx 160rpx 20rpx;
		
	  }
	  .putbox{
		  width: 100%;
		   background-color: white;
		   border-radius: 20rpx;
		   box-sizing: border-box;
		   padding: 20rpx;
		    box-shadow: 0 0 16rpx rgba(0, 0, 0, 0.2);
			.puttile{
				height: 30rpx;
				line-height: 30rpx;
				border-left: 8rpx solid  #1a4f8a;
				padding-left: 20rpx;
				font-weight: bold;
			}
			.putlebel{
				margin-top: 20rpx;
				font-size: 28rpx;
				font-weight: bold;
			}
			.put{
				width:100% ;
				border: 1rpx solid #cccccc;
				margin-top: 10rpx;
				height: 40rpx;
				font-size: 28rpx;
								
			}
			.contentbox{
				width: 100%;
				 background-color: white;
				 border-radius: 20rpx;
				 box-sizing: border-box;
				 padding: 20rpx;
				  box-shadow: 0 0 16rpx rgba(0, 0, 0, 0.2);
			  .puttile{
			  	height: 30rpx;
			  	line-height: 30rpx;
			  	border-left: 8rpx solid  #1a4f8a;
			  	padding-left: 20rpx;
			  	font-weight: bold;
			  }
			  .content{
				  display: flex;
				  align-items: flex-start;
				  font-size: 28rpx;
				  margin-top: 20rpx;
				  .dian{
					  
					  width: 8rpx;
					   margin-top: 14rpx;
					   margin-right: 20rpx;
					  height: 8rpx;
					  border-radius: 50%;
					  background-color: #0099ff;
				  }
			  }
			  .btnline{
				  width: 100%;
				  display: flex;
				  align-items: center;
				  justify-content: space-evenly;
				  margin-top: 20rpx;
				  .btn1{
					  width: 40%;
					  height: 70rpx;
					  border-radius: 35rpx;
					  box-sizing: border-box;
					  line-height: 70rpx;
					  text-align: center;
					  font-weight: bold;
					  background-color: #1a4f8a;
					  color: white;
				  }
				  .btn2{
				  					  width: 40%;
				  					  height: 70rpx;
				  					  border-radius: 35rpx;
				  					  box-sizing: border-box;
				  					  line-height: 70rpx;
				  					  text-align: center;
				  					  font-weight: bold;
				  					   border: 1rpx solid #1a4f8a;
									   color: #1a4f8a;
				  }
			  }
			  }
			  .btnline{
			  				  width: 100%;
			  				  display: flex;
			  				  align-items: center;
			  				  justify-content: space-evenly;
			  				  margin-top: 20rpx;
			  				  .btn1{
			  					  width: 40%;
			  					  height: 70rpx;
			  					  border-radius: 35rpx;
			  					  box-sizing: border-box;
			  					  line-height: 70rpx;
			  					  text-align: center;
			  					  font-weight: bold;
			  					  background-color: #1a4f8a;
			  					  color: white;
			  				  }
			  				  .btn2{
			  				  					  width: 40%;
			  				  					  height: 70rpx;
			  				  					  border-radius: 35rpx;
			  				  					  box-sizing: border-box;
			  				  					  line-height: 70rpx;
			  				  					  text-align: center;
			  				  					  font-weight: bold;
			  				  					   border: 1rpx solid #1a4f8a;
			  									   color: #1a4f8a;
			  				  }
			  }
	  }
  }
</style>